#include('header.html', {title: '全部视频'})
<style>
  li {
    cursor: pointer;
    /*padding-right: 5px;*/
  }

  li:hover {
    color: #00bb00;
  }
  .tabs-mark-group .title {
    width: auto!important;
    margin-top: 0!important;
  }

  .tabs-mark-group .content li.active {
    color: #43bc60;
  }

  .tabs-mark-group .content {
    margin-left: 50px!important;
  }
</style>
<div class="es-wrap">
  <div class="es-banner">
    <div class="container">
      <div class="title">
        <i class="es-icon es-icon-viewcomfy"></i>
        课程列表
      </div>
    </div>
  </div>

  <div id="content-container" class="container">
    <!--课程分类-->
    <div class="tabs-wrapper">
      <div class="tabs-mark-group plm ptm clearfix">
        <div class="title">年级：</div>
        <ul id="specialty" class="content list-unstyled list-inline">
          <li :class="!specialty.id?'active':''" @click="getCourses()">全部</li>
          <li v-for="(sp, index) in specialties" :specialty="sp"
              :class="sp.id == specialty.id ? 'active':''" @click="chooseSpecialty(index)"
              :index="index">{{sp.name}}
          </li>
        </ul>
      </div>
      <div class="tabs-mark-group plm ptm clearfix">
        <div class="title">学科：</div>
        <ul id="subject" class="content list-unstyled list-inline">
          <li :class="!subject.id?'active':''" @click="getCourses(true)">全部</li>
          <li v-for="(sb, index) in subjects" :subject="sb"
              :class="sb.id == subject.id ? 'active':''" @click="chooseSubject(index)"
              :index="index">{{sb.name}}
          </li>
        </ul>
      </div>
    </div>

    <!--课程列表容器-->
    <div class="course-list">
      <div class="row">
        <!--课程卡片-->
        <div v-if="page.totalRows <= 0" class="empty">当前分类暂无课程，换个试试</div>
        <course-item v-for="c in page.rows" :course="c" :key="c.id"></course-item>
      </div>
    </div>
    <!--分页-->
    <div v-if="page.totalPages > 1" class="text-center">
      <navigation :pages="page.totalPages" :current.sync="page.pageNum"/>
    </div>
  </div>
</div>
<template id="course-item">
  <div class="col-lg-3 col-md-4 col-xs-6">
    <div class="course-item">
      <div class="course-img">
        <a :href="'/course/'+course.id+'/info'">
          <img :src="course.cover" :alt="course.name" class="img-responsive">
        </a>
      </div>
      <div class="course-info">
        <div class="title">
          <a class="link-dark" target="_blank" :href="'/course/'+course.id+'/info'">
            {{course.name}}
          </a>
        </div>
        <div class="metas clearfix">
          <div class="i-course-time">
            <span class="txt">
              <span class="course-price-widget">
                <span style="color: #999;">{{course.time.substr(0, 10)}}</span>
              </span>
            </span>
          </div>
          <div class="i-course-metas">
            <span>
              <i class="es-icon es-icon-playcircleoutline"></i>{{course.students}}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  var AllVm = new Vue({
    el: '.es-wrap',
    data: {
      specialty: {},
      specialties: [],
      subject: {},
      subjects: [],
      page: {
        rows: [],
        pageNum: 1,
        totalPages: 0
      },
      spId: ${spId},
      sbId: ${sbId}
    },
    watch: {
      'page.pageNum': function (nv) {
        this.getCourses(true, true);
      }
    },
    components: {
      'course-item': {
        props: ['course', 'type'],
        template: '#course-item'
      }
    },
    methods: {
      chooseSpecialty: function(index) {
        this.specialty = this.specialties[index];
        this.subject = {};
        this.getCourses(true);
      },
      chooseSubject: function(index) {
        this.subject = this.subjects[index];
        this.getCourses(true, true);
      },
      getSpecialties: function () { // grades
        var self = this;
        $.post('/course/type/specialty/page', function (data) {
          self.specialties = [];
          if (data.success) {
            self.specialties = data.payload.rows;
          } else {
            console.log("没有年级数据！")
          }
        });
      },
      getSubjects: function (spid) {
        if (spid == null) spid = 0;
        var self = this;
        $.post('/course/type/subject/page', {limit: 20, csid: spid, nr: true}, function (data) {
          self.subjects = [];
          if (data.success) {
            self.subjects = data.payload.rows;
          } else {
            console.log("没有学科信息");
          }
        });
      },
      getCourses: function (spec, sub) { // 是否加上年级或学科
        var self = this;
        var where = {size: 20};
        if (spec) {
          where.spec = self.specialty.id;
        } else {
          self.specialty = {};
        }
        if (sub) {
          where.sub = self.subject.id;
        } else {
          self.subject = {};
          self.getSubjects(self.specialty.id);
        }
        $.post('/course/api/public/page', where, function (data) {
          self.page.rows = [];
          self.page.totalPages = 0;
          self.page.totalRows = 0;
          if (data.success) {
            self.page = data.payload;
          } else {
            console.log("没有课程信息")
          }
        });
      }
    },
    created: function () {
      this.getSpecialties();
      if (this.spId > 0) {
        this.specialty.id = this.spId;
        this.spId = 0;
      }
      if (this.sbId > 0) {
        this.subject.id = this.sbId;
        this.sbId = 0;
      }
      this.getCourses(true, true);
      this.getSubjects(this.specialty.id);
    }
  });

</script>
#include('footer.html')